<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <h4>对象存储</h4>
        <div class="search-box">
          <el-input
            v-model="obj.params.keyword"
            placeholder="请输入桶名称"
            class="input-with-select"
            size="small"
          >
            <template #append>
              <el-button :icon="Search"></el-button>
            </template>
          </el-input>
        </div>
      </div>
    </template>
    <el-table :data="obj.tableData" style="width: 100%">
      <el-table-column prop="bucket" label="桶名称">
        <template #default="{ row }">
          <span
            class="bucket-title"
            @click="$router.push({ name: 'ObjManage', query: { id: row.id } })"
          >
            {{ row.bucketName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="storageType" label="存储类别">
        <template #default="{ row }">
          {{
            row.storageType === 0
              ? '标准存储'
              : row.storageType === 1
              ? '低频访问存储'
              : row.storageType === 2
              ? '归档存储'
              : '--'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="usedCapacityDesc" label="存储用量" />
      <el-table-column prop="fileCount" label="对象数量" />
      <el-table-column prop="createTime" label="创建时间" />
    </el-table>
    <div class="page-box">
      <el-pagination
        v-model:currentPage="obj.params.current"
        background
        :page-size="obj.params.size"
        layout="prev, pager,next,->"
        :total="obj.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons'
import { bucketList } from '@/api/bucket'
import { reactive } from 'vue'
const obj = reactive({
  params: {
    current: 1,
    keyword: '',
    size: 10
  },
  total: 0,
  tableData: []
})
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const getDataList = () => {
  const data = { ...obj.params }
  bucketList(data)
    .then(res => {
      console.log(res)
      obj.tableData = res.data.records
      obj.params.current = res.data.current
      obj.total = res.data.total
    })
    .catch(err => {
      console.log(err)
    })
}
getDataList()
</script>

<style lang="scss" scoped>
.card-header {
  h4 {
    font-size: 16px;
    margin: 0 0 20px 0;
  }
  .search-box {
    width: 300px;
  }
}
::v-deep(.bucket-title) {
  background-color: rgb(122, 111, 190);
  display: block;
  color: var(--font-color);
  font-weight: bold;
  padding: 0 20px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  width: 50%;
}
</style>
